<template>
  <view class="main">
    <familyInner @changePerson="changePerson"></familyInner>
    <!--服务页面  -->
    <!-- 头部家人部分 -->
    <!--
    <view class="family">
      <view class="family-bg-red"></view>
      <view class="family-content">
        <scroll-view class="scroll-view_H" scroll-x="true" :scroll-left="familyScrollLeft">
          <view class="f-inner">
            <view v-for="(item, index) in familyList" :key="index" class="f-item" @click="changePerson(index)">
              <view :class="['f-logo', item.sex ? 'f-b-imgw-boy' : 'f-b-imgw-girl']">
                <image :src="item.src" :alt="item.insuredName" class="f-logo-img" />
              </view>
              <view v-if="familyIndex === index" class="f-san"> </view>
            </view>
          </view>
        </scroll-view>
        <view class="p-user">
          <view class="p-u-logo">
            <image :src="personLogo" alt="" />
          </view>
          <view class="p-u-name">{{ patientInfo.name }}</view>
          <view class="p-u-line"></view>
          <view class="p-u-goods">万户健康社区</view>
        </view>
      </view>
    </view>
    -->
    <!-- 用户购买的所有服务单 -->
    <view class="order-wrap">
      <!--
      <view class="order">
        <view class="pkg">
          <view class="healthPannel">
            <view v-if="showVideoDoctorBtn" class="radiosList" @click="callVideo">
              <view class="icon icon-red"><img :src="require('../../static/icon/icon-doctor.png')" /></view>
              <view class="name">呼叫医生</view>
            </view>

            <view v-if="showHealthExaminationBtn" class="radiosList" @click="physicalExamination">
              <view class="icon icon-red"><img :src="require('../../static/icon/icon-check.png')" /></view>
              <view class="name">体检服务</view>
            </view>
            <view v-if="showHealthAssessmentBtn" class="radiosList bgOrigin" @click="startReportTalk">
              <view class="icon"><img :src="require('../../static/icon/healthAssIcon.png')" /></view>
              <view class="name">健康评估</view>
            </view>
            <view class="radiosList" @click="healthReport">
              <view class="icon">
                <view v-if="isMark" class="mark"></view>
                <img :src="require('../../static/icon/assHiltory.png')" />
              </view>
              <view class="name">健康报告</view>
            </view>
            <view class="radiosList" @click="startHealthyPage">
              <view class="icon"><img :src="require('../../static/icon/healthIcon.png')" /></view>
              <view class="name">健康档案</view>
            </view>

            <view class="radiosList" @click="goServiceList">
              <view class="icon"><img :src="require('../../static/icon/s-list.png')" /></view>
              <view class="name">服务订单</view>
            </view>
          </view>

          <view class="service-banner" @click="bugMoreService">
            <img
              src="https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/images/service-b1.gif "
            />
          </view>
        </view>
      </view>
      -->
      <!-- <view class="service-ad">
        <view class="s-ad-title">推荐服务</view>
        <view class="s-ad-img">
          <img
            src="https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/images/service-b2.gif"
            alt="推荐服务"
          />
        </view>
      </view> -->
      <view v-if="!hasServices" class="pkg-tip-wrap">
        <!-- <view class="orderTitle">服务订单</view> -->
        <view class="zwjl"></view>
      </view>

      <view v-if="inserviceOrderList.length" class="order-list-wrap">
        <view v-for="(order, index) in inserviceOrderList" :key="index" :class="['order', 'order' + index]">
          <!--
          <view class="pkg">
            <view>
              <view v-if="index === 0" class="p-user">
                <view class="p-u-logo">
                  <image :src="personLogo" alt="" />
                </view>
                <view class="p-u-name">{{ order.insuredName }}</view>
                <view class="p-u-line"></view>
                <view class="p-u-goods">万户健康公益项目</view>
              </view>
              <view v-if="index === 0">
                <view class="healthPannel">
                  <view class="radiosList" @click="startHealthyPage">
                    <view class="icon"><img :src="require('../../static/icon/healthIcon.png')" /></view>
                    <view class="name">健康档案</view>
                  </view>
                </view>
                <view class="radiosList" @click="useDrugPage">
                  <view class="icon"><img :src="require('../../static/icon/healthIcon.png')" /></view>
                  <view class="name">用药评估</view>
                </view>
              </view>
            </view>
          </view>
          -->
          <!-- <view v-if="index === 0" class="orderTitle">服务订单</view> -->
          <!-- 服务订单标题 -->
          <view v-if="index === 0 || canSpread">
            <view class="p-info">
              <view class="p-i-name-w">
                <text class="p-i-name">{{ order.insurancePackageName }}</text>
              </view>
              <view class="p-i-operate">
                <text class="p-i-status" :style="{ background: serviceStatusColor[order.status] }">{{
                  order.status | getOrderStatusName
                }}</text>

                <!-- teamOrderNo存在表面有保险，待激活或者服务中，已支付，无问询或者问询失败 -->
                <view class="p-i-btn p-detail" @click="checkServiceDetail(order)">查看详情</view>

                <view v-if="showInsuranceButton(order)" class="p-i-btn marginL20" @click="beActive(order)"> 激活 </view>
                <view
                  v-if="order.status === 2 && order.payStatus === 0 && order.amount"
                  class="p-i-btn marginL20"
                  @click="payment(order)"
                >
                  支付
                </view>
              </view>
            </view>
            <!-- 服务产品 -->
            <!-- 
            <view v-if="order.products && order.products.length > 0" class="p-prod">
              <view v-for="(item, index2) in order.products" :key="index2">
                <view
                  v-if="
                    item.insuranceProductType === 1 ||
                    item.insuranceProductType === 8 ||
                    item.insuranceProductType === 3
                  "
                >
                  <view v-if="item.insuranceProductType === 1 && order.inserviceInfo" class="goods">
                    <view class="g-info">
                      <view class="g-i-name">
                        <text>{{ order.inserviceInfo.npackageName }}</text>
                      </view>
                    </view>
                    <view
                      v-if="order.inserviceInfo.showApplyBtn"
                      class="g-apply"
                      @click="applyInsureMoney(order.inserviceInfo)"
                      >申领保障金
                    </view>

                    <view
                      v-if="
                        order.inserviceInfo.teamOrderStatus === 0 && order.inserviceInfo.healthEnquiries.length === 0
                      "
                      class="g-apply"
                      @click="activeInsure(order.inserviceInfo, order)"
                      >登记保险</view
                    > 
                  </view>

                  <view v-if="item.insuranceProductType === 3" class="fl-list">
                    <view class="fl-item">
                      <view style="display: flex">
                        <view class="fl-con">
                          <view class="fl-des">
                            <view class="fl-name">
                              {{ item.insuranceProductName || '' }}
                            </view>
                          </view>
                        </view>
                      </view>

                      <view v-if="order.status === 3" class="fl-btn" @click="startReport">开始评估</view>
                    </view>
                  </view> 
                </view>
              </view>
            </view>
            -->

            <!-- <view class="spread-opr" @click="changeSpreadStatus">
              <view v-if="!canSpread && inserviceOrderList.length > 1" class="opr opr-down">
                <view class="opr-txt">展开全部</view>
                <view class="opr-img-wrap"><image :src="aDownPng" /></view>
              </view>
              <view v-if="canSpread && index === inserviceOrderList.length - 1" class="opr opr-up">
                <view class="opr-txt">收起列表</view>
                <view class="opr-img-wrap"><image :src="aDownPng" /></view>
              </view>
            </view> -->
          </view>

          <!-- <view v-if="index !== inserviceOrderList.length - 1" class="order-line">
            <view class="o-l-left"></view>
            <view class="o-line"></view>
            <view class="o-l-right"></view>
          </view> -->
        </view>
      </view>
    </view>
  </view>
</template>
<script>
// 服务页接口  获取当前用户的服务订单
import {
  getFamilyData,
  getInserviceInfoByOrderId,
  getArticleDetail,
  getInsureDetail,
  existEstimatedOrder,
  ingoreFirstExistEstimatedOrder,
  getPatientInfo,
  getInsuranceOrder,
  getpayNum
} from '@/api/service.js';
import { reportAll } from '@/api/assessQuestion';
import { getUserInfoByPatientId } from '@/api/join.js';

// 家人关系
import aDownPng from '@/static/icon/a-down.png';
// 引入统计
import { tongji } from '@/utils/tools.js';

// 保障、非保障图片地址
import bzPng from '@/static/icon/bz.png';
import dbPng from '@/static/icon/db.png';
import wbPng from '@/static/icon/wb.png';
import { webBaseUrl, commonProjectType } from '@/common/baseUrl.js';
import { inquiryMixin } from '@/common/mixin.js';
import { familyInner } from '@/components/familyInner';

export default {
  components: {
    // popCom
    // agreeScroll
    familyInner
  },

  filters: {
    getOrderStatusName(key) {
      let orderKeyValue = {
        2: '待激活',
        3: '服务中',
        4: '已完成',
        6: '已终止'
      };
      return orderKeyValue[key] || '未知';
    }
  },
  mixins: [inquiryMixin],
  data() {
    return {
      membersStatus: {
        0: wbPng,
        2: dbPng,
        3: bzPng
      },
      aDownPng,
      hasServices: true, // 默认有服务
      flLogo:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/service/fl-logo.png',
      addPng:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/service/add.png',
      // adownPng: adownPng,
      patientId: '',
      inserviceOrderList: [], // 用户购买的的服务订单，服务订单下的服务产品中，保险跟其他的产品不同，需要另外通过接口获取tnnd  使用insureOrderList存放保险订单详情
      insureOrderList: [], // 保单列表。 一个服务单下会有一个保险产品，insureOrderList要与inserviceOrderList长度保持一致，这样取值才不会出错。
      familyList: [], // 默认必须有当前登录人
      familyIndex: 0,
      closePng:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/service/close.png',
      currentArticle: {}, // 当前文章
      popArticleTitle: '', // 文档列表弹窗标题
      popArticleList: [], // 弹窗文档列表
      popArticleListIsShow: false, // 是否显示
      articleDetailIsShow: false,

      packageProduct: [], //  用户服务单下的服务产品列表
      receiverAddress: [], // 当前用户收货地址
      regularMedicationInfo: null, // 会员三定信息
      flArticleList: [], // 健管健教 产品文档
      hasEstimatedOrder: false, // 是否存在三定订单
      pkg: {
        user: {
          name: '',
          goods: ''
        },
        info: {
          name: '',
          dc: '',
          ts: '',
          peroidStart: '',
          peroidEnd: ''
        }
      },
      personLogo:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/service/person.png',
      hasPhysicalExamination: false, // 是否有健康评估报告
      patientInfo: {},
      currentPatientInfo: {},
      currentPatientName: '',
      userInfo: {},
      // 2待激活 3服务中  4已完成 6已终止
      serviceNameBgColor: {
        2: '#F4F4F4',
        3: '#FFF1EF',
        4: '#E7EDFE',
        6: '#F4F4F4'
      },
      serviceStatusColor: {
        2: '#FFBE00',
        3: '#8ED7B1',
        4: '#F25559',
        6: '#F34E1C'
      },
      hasCommitDrugInfo: false, // 是否提交过三定用药信息
      canSpread: true, // 是否可以展开
      familyScrollLeft: 0,
      showHealthAssessmentBtn: false,
      showHealthExaminationBtn: false,
      onLoadPatientId: '',
      isPay: 0, // 判断是否支付(根据后端返回数组的长度判断)
      isMark: false, // 是否有未读报告
      showVideoDoctorBtn: false
    };
  },
  onLoad(option) {
    // 获取当前用户相关信息
    try {
      this.userInfo = JSON.parse(wx.getStorageSync('rawData'));
    } catch (e) {
      console.log('e:', e);
    }
    // 当前用户id
    let patientId = (option && option.patientId) || this.$store.state.join.patientid || wx.getStorageSync('patientId');
    this.patientId = patientId;
    // this.patientId = '1e1a94a2660d44d5a2b394bf999232ea';

    if (option && option.patientId) {
      this.onLoadPatientId = option.patientId;
    }
    // 获取家人关系，始终使用当前登录人的id
    this.getFamilyList(this.$store.state.join.patientid);
    // 获取当前登录人的姓名
    getUserInfoByPatientId(this.$store.state.join.patientid).then((res) => {
      this.currentPatientInfo = res.data;
      this.currentPatientName = res.data.name;
    });
  },
  async onShow() {
    const r = await reportAll({
      patientId: this.patientId,
      hasRead: false
    });
    this.isMark = r.data || 0;
  },
  computed: {
    drugPackageProduct() {
      return this.packageProduct.filter((item) => {
        return item.productType === 8;
      });
    },
    healthPackageProduct() {
      return this.packageProduct.filter((item) => {
        return item.productType === 3;
      });
    },

    // 是否展示登记保险按钮
    showInsuranceButton() {
      return function (order) {
        return (
          order.teamOrderNo &&
          (order.status === 2 || order.status === 3) &&
          (order.payStatus === 1 || order.amount === 0) &&
          (!order.healthEnquiries || (Array.isArray(order.healthEnquiries) && order.healthEnquiries.length === 0)) &&
          order.inserviceInfo.needInquiry
        );
        // return info.teamOrderStatus === 0 && info.healthEnquiries.length === 0 && info.needInquiry;
      };
    }
  },
  methods: {
    initData() {
      this.hasServices = true;
      this.inserviceOrderList = []; // 用户购买的的服务订单，服务订单下的服务产品中，保险跟其他的产品不同，需要另外通过接口获取tnnd  使用insureOrderList存放保险订单详情
      this.insureOrderList = []; // 保单列表。 一个服务单下会有一个保险产品，insureOrderList要与inserviceOrderList长度保持一致，这样取值才不会出错。
      this.currentArticle = {}; // 当前文章
      this.popArticleTitle = ''; // 文档列表弹窗标题
      this.popArticleList = []; // 弹窗文档列表
      this.packageProduct = []; //  用户服务单下的服务产品列表
      this.receiverAddress = []; // 当前用户收货地址
      this.regularMedicationInfo = null; // 会员三定信息
      this.flArticleList = []; // 健管健教 产品文档
      this.hasEstimatedOrder = false; // 是否存在三定订单
      this.hasPhysicalExamination = false; // 是否有健康评估报告
      this.patientInfo = {};
      this.currentPatientInfo = {};
      this.showHealthAssessmentBtn = false;
      this.showHealthExaminationBtn = false;
      this.showVideoDoctorBtn = false;
    },
    callVideo() {
      uni.navigateTo({
        url: '/pagesC/videoDoctor/index?patientId=' + this.patientId
      });
    },
    checkServiceDetail(order) {
      // 查看详情
      this.$wxPromise.navigateTo({
        url: '/pages/service/detail?orderId=' + order.orderId + '&patientId=' + this.patientId
      });
      tongji('c94935aa-1865-4f9e-9c9f-cc8964ca21b6');
    },
    changeSpreadStatus() {
      this.canSpread = !this.canSpread;
    },
    initFamilyIndex() {
      let curFamilyIndex = -1;
      if (this.onLoadPatientId) {
        for (let i = 0; i < this.familyList.length; i++) {
          let item = this.familyList[i];
          if (item.insuredId === this.patientId) {
            curFamilyIndex = i;
            break;
          }
        }
      } else {
        curFamilyIndex = 0;
      }

      // 默认一行能显示5个,index是从0开始的。一个家庭成员logo宽96，边距44，合计140
      if (curFamilyIndex >= 4) {
        this.familyScrollLeft = (curFamilyIndex - 4) * 140 + 'rpx';
      }
      this.changePerson(curFamilyIndex);
    },
    showServiceList(title, articleList) {
      this.$store.commit('service/SET_SERVICE_TITLE', title);
      this.$store.commit('service/SET_SERVICE_ARTICLELIST', articleList);
      // 显示服务列表页
      this.$wxPromise.navigateTo({
        url: `/pages/service/agreeList`
      });
    },
    showEstimatedPickupDate(date) {
      // 是否显示三定送达时间
      let now = new Date();
      let localDate = now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate();
      return date && new Date(date.replace(new RegExp(/-|\./gm), '/')) >= new Date(localDate);
    },
    showAllProductsTitle(order) {
      let temp = false;
      if (order) {
        for (let item of order.products) {
          if (item.insuranceProductType === 1 || item.insuranceProductType === 8 || item.insuranceProductType === 3) {
            temp = true;
            break;
          }
        }
      }
      return temp;
    },
    bugMoreService() {
      uni.navigateTo({
        url: '/pagesC/service/index'
      });
    },
    init() {
      // 获取当前用户的服务订单
      this.getInserviceById(this.patientId);
      // 获取是否有三定订单
      this.getEstimatedOrderInfo(this.patientId);
      // 判断是否提交过三定用药信息
      // this.getCommitDrugInfo(this.patientId);
      // 获取会员信息
      getPatientInfo(this.patientId).then((res) => {
        if (res.code !== 0) {
          uni.showModal({
            title: '提示',
            content: '获取会员信息失败'
          });
        } else {
          this.patientInfo = res.data;
        }
      });

      // 判断三定用药是否支付
      getpayNum(this.patientId).then((res) => {
        this.isPay = res || [];
      });
    },

    gotoReportList() {
      this.$wxPromise.navigateTo({
        url: '/pagesB/assessSick/assessHistoryListPage?patientId=' + this.patientId
      });
      this.$store.commit('assessQuestion/SET_ASSESSPATIENTID', this.patientId);
    },
    startHealthyPage() {
      const { relation } = this.familyList[this.familyIndex];
      this.$wxPromise.navigateTo({
        url: `/pagesB/healthyRecord/targetHistoryList?patientId=${this.patientId}&relation=${relation}`
      });
    },
    goServiceList() {
      // 提到服务列表页
    },
    useDrugPage() {
      this.$wxPromise.navigateTo({
        url: '/pages/view/web-view?url=' + webBaseUrl + 'evaluationPatient'
      });
    },
    startReport() {
      // 友盟
      tongji('517beaa9-c538-47cb-aab7-5fb8098bd647');
      // 跳转到评估报告列表页
      this.$wxPromise.navigateTo({
        url: '/pagesB/assessSick/index?patientId=' + this.patientId
      });
      // uni.reLaunch({
      //   url: '/pagesB/assessSick/index?patientId=' + this.patientId
      // });
    },
    startReportTalk() {
      tongji('517beaa9-c538-47cb-aab7-5fb8098bd647');
      // 跳转到评估报告列表页
      const { relation, sex } = this.familyList[this.familyIndex];
      this.$wxPromise.navigateTo({
        url: `/pagesB/cardiovascularAssess/index?patientId=${this.patientId}&relation=${relation}&sex=${sex}`
      });
    },

    apply3d(item) {
      // 申请开通3定
      this.$wxPromise.navigateTo({
        url: '/pages/deliveryService/index?insuredPatientId=' + this.patientId + '&orderId=' + item.insuranceOrderId
      });
    },
    getEstimatedOrderInfo(patientId) {
      ingoreFirstExistEstimatedOrder(patientId).then((res) => {
        if (res.code !== 0) {
          uni.showModal({
            title: '提示',
            content: '获取三定信息失败'
          });
        } else {
          this.hasCommitDrugInfo = res.data;
          // 如果返回ture，则接着判断
          if (res.data) {
            existEstimatedOrder(patientId).then((res) => {
              if (res.code !== 0) {
                uni.showModal({
                  title: '提示',
                  content: '获取三定信息失败'
                });
              } else {
                this.hasEstimatedOrder = res.data;
              }
            });
          }
        }
      });
    },
    // 判断是否提交了用药信息 true为提交过用药信息，false为没有提交过用药信息
    getCommitDrugInfo(patientId) {
      ingoreFirstExistEstimatedOrder(patientId).then((res) => {
        if (res.code !== 0) {
          uni.showModal({
            title: '提示',
            content: '获取三定信息失败'
          });
        } else {
          this.hasCommitDrugInfo = res.data;
        }
      });
    },
    async checkInsureCertificate(order) {
      // 查看保险凭证
      getInsureDetail(order.orderId).then((res) => {
        if (res.code !== 0) {
          uni.showToast({
            title: '获取保障详情失败'
          });
        }
        this.$wxPromise.navigateTo({
          url: '/pages/view/web-view?url=' + res.data.pdfUrl
        });
      });
    },
    async changePerson(index) {
      // 如果index不为-1.则表示需要切换用户
      if (index !== -1) {
        this.patientId = this.familyList[index].insuredId || this.$store.state.join.patientid;
      }

      // uni.showLoading();
      this.familyIndex = index;
      this.initData();
      this.init();

      const r = await reportAll({
        patientId: this.patientId,
        hasRead: false
      });
      this.isMark = r.data || 0;
    },
    serviceDays(orderDate) {
      let days =
        Math.floor((new Date() - new Date(orderDate.replace(new RegExp(/-|\./gm), '/'))) / (24 * 60 * 60 * 1000)) || 0;
      if (days < 0) {
        days = 0;
      }
      return days;
    },
    helpFamilyJoin() {
      // 友盟
      tongji('204148ba-6874-47d7-9aec-5cee3f24d08d');
      // 帮家人加入
      getUserInfoByPatientId(this.$store.state.join.patientid).then((res) => {
        if (res.code === 0 && res.data.realNameAuthenticationPassed === 1) {
          this.$wxPromise.navigateTo({
            url: '/pages/join/form?fromPage=1'
          });
        } else {
          this.$wxPromise.navigateTo({
            url: '/pages/join/authorIdentityChaeck'
          });
        }
      });
    },
    getFamilyList(patientId) {
      getFamilyData(patientId).then((res) => {
        if (res.code !== 0) {
          uni.showToast({ title: '获取用户关系列表失败' });
          return;
        }
        const newUserInfo = [
          {
            relation: 1,
            patientId: patientId,
            sex: null,
            status: null
          }
        ];
        let resData = res.data.length > 0 ? res.data : newUserInfo;
        resData.forEach((item) => {
          item.insuredId = item.memberId;
          item.insuredName = item.memberName;
          // sex 1男  0为女
          if (item.sex === 1) {
            if (item.relation === 3) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/father.png';
            } else if (item.relation === 4) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/son.png';
            } else {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/man.png';
            }
          } else {
            if (item.relation === 3) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/mother.png';
            } else if (item.relation === 4) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/der.png';
            } else {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/woman.png';
            }
          }
          // 如果是本人的话，则使用微信头像
          if (item.relation === 1) {
            item.src = this.userInfo.avatarUrl || item.src;
          }
        });

        this.familyList = resData;
        // if (this.familyList.length) {
        //   this.patientId = this.familyList[0].insuredId;
        // } else {
        //   this.patientId = patientId;
        // }
        this.initFamilyIndex();
      });
    },
    /* eslint-disable*/
    getInserviceById(patientId) {
      // 获取用户服务订单
      // 接口  查询被保险人服务单  /insuranceOrder

      getInsuranceOrder(patientId).then((res) => {
        if (res.code !== 0) {
          uni.showToast({ title: '获取用户服务单失败' });
          return;
        }
        // 用户购买的服务订单
        let tempInserviceOrderList = res.data.filter((oData) => {
          // 只获取type为6的订单
          return oData.projectType === commonProjectType;
        });

        // 对inserviceOrderList 进行排序 按时间先后进行排序
        let temp2inserviceOrderList = tempInserviceOrderList.sort((item1, item2) => {
          return item2.orderDate - item1.orderDate;
        });

        // 判断是否显示健康评估按钮，要求：服务订单状态待非待激活且含有健管健教
        temp2inserviceOrderList.forEach((order) => {
          // 服务中
          if (order.status === 3) {
            order.products.forEach((pro) => {
              // 待激活，已激活
              if (pro.insuranceProductStatus === 10 || pro.insuranceProductStatus === 20) {
                if (pro.insuranceProductType === 3) {
                  // 健教健管类
                  this.showHealthAssessmentBtn = true;
                } else if (pro.insuranceProductType === 4) {
                  // 视频医生
                  this.showVideoDoctorBtn = true;
                } else if (pro.insuranceProductType === 2) {
                  // 体检类
                  this.showHealthExaminationBtn = true;
                }
              }
            });
          }
        });

        if (temp2inserviceOrderList.length > 0) {
          let sucNum = 0;
          temp2inserviceOrderList.forEach(async (order, oIndex) => {
            let orderId = order.orderId;
            // 获取服务单详情 /patients/insurance_order/
            getInserviceInfoByOrderId(orderId).then(async (res) => {
              if (res.code !== 0) {
                uni.showToast({ title: '获取详情失败' });
                return;
              }
              let inserviceInfo = res.data;

              let pkgArticleList = [];
              // 保险包附件文档列表
              if (inserviceInfo.packageProduct) {
                // 服务产品取的是packageProduct   服务包取的是insurancePackageSpecs
                inserviceInfo.packageProduct.forEach((pro) => {
                  if (pro.productType === 1) {
                    inserviceInfo.npackageName = pro.productName;
                    if (pro.productSpecs) {
                      pro.productSpecs.forEach((spe) => {
                        if (spe.type == 1) {
                          pkgArticleList.push(spe);
                        }
                      });
                    }
                  }
                });
              }
              let inserviceArticleList = [];
              // 获取服务包协议insurancePackageSpecs
              if (inserviceInfo.insurancePackageSpecs) {
                inserviceInfo.insurancePackageSpecs.forEach((item) => {
                  // 会员服务协议
                  if (item.type === 7) {
                    inserviceArticleList.push(item);
                  }
                });
              }

              // 判断是否有保险订单，有保险订单再执行获取等待期和问询的操作
              let hasInsure = order.products.some((item) => {
                return item.insuranceProductType === 1;
              });

              if (hasInsure) {
                // 如果存在保单开始时间，则说明该服务单含有保险，且有保险等待期。如果服务单不含保险，getInsureDetail获取等待期会报错
                let insureResult = await getInsureDetail(orderId);
                if (inserviceInfo.startDate) {
                  // 获取保险包等待期
                  if (insureResult.code !== 0) {
                    // uni.showModal({
                    //   title: '提示',
                    //   content: '获取保障详情失败'
                    // });
                    return;
                  }
                  // 等待期
                  let delayDays = insureResult.data.delayDays || 0;
                  // 保单开始时间，保单结束时间
                  let dayTimes = 24 * 60 * 60 * 1000;
                  let startDate =
                    new Date(inserviceInfo.startDate.replace(new RegExp(/-|\./gm), '/')).getTime() +
                    delayDays * dayTimes;

                  let tempEndDate = new Date(inserviceInfo.endDate.replace(new RegExp(/-|\./gm), '/'));
                  tempEndDate.setFullYear(tempEndDate.getFullYear() + 2);

                  let endDate = tempEndDate.getTime() - Number(dayTimes);
                  let now = new Date();
                  let localDate = now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate();
                  let nowDate = new Date(localDate);
                  let isInProduct = nowDate >= startDate && nowDate <= endDate;
                  // 1已承保 3已完成  5已退保
                  if (
                    inserviceInfo.teamOrderStatus === 1 ||
                    ((inserviceInfo.teamOrderStatus === 3 || inserviceInfo.teamOrderStatus === 5) && isInProduct)
                  ) {
                    // 服务中
                    inserviceInfo.showApplyBtn = true;
                  }
                }
                // 是否有问询
                inserviceInfo.healthEnquiries = insureResult.data.healthEnquiries || [];
              }

              inserviceInfo.pkgArticleList = pkgArticleList;
              inserviceInfo.inserviceArticleList = inserviceArticleList;
              order.inserviceInfo = inserviceInfo;
              // this.insureOrderList.push(inserviceInfo);

              // // 该保单下的所有产品
              // let packageProduct = [];
              // let tempPackageProduct = this.inserviceInfo.packageProduct;
              // // 对服务单产品进行排序,顺序为：9企业会员类、1保险类、8药品直供类、2体检类、4视频医生（和缓）、5特药福利类、7保险直赔类、6线下医生类、3健教健管类
              // let pckOrderBy = [9, 1, 8, 2, 4, 5, 7, 6, 3];
              // for (let i of pckOrderBy) {
              //   tempPackageProduct.forEach((item) => {
              //     if (item.productType === i) {
              //       packageProduct.push(item);
              //     }
              //   });
              // }
              // this.packageProduct = packageProduct;
              sucNum++;
              if (sucNum === temp2inserviceOrderList.length) {
                // 隐藏loading
                // uni.hideLoading();
                this.inserviceOrderList = temp2inserviceOrderList;
              }
            });
          });
        } else {
          // 隐藏loading
          this.hasServices = false; // 没有服务
          // uni.hideLoading();
          this.inserviceOrderList = [];
        }
      });
    },
    showServiceArticleList(item) {
      if (item.inserviceArticleList.length) {
        // 显示服务详情列表
        this.popArticleList = item.inserviceArticleList;

        // this.popArticleListIsShow = true;
        // this.popArticleTitle = '服务条款';
        this.showServiceList('服务条款', this.popArticleList);
      } else {
        uni.showModal({
          title: '提示',
          content: '该服务包暂无服务协议'
        });
      }
    },
    closeServiceArticleList() {
      this.popArticleList = [];
      this.popArticleListIsShow = false;
    },
    showArticleDetail(articleId) {
      // 显示文章
      getArticleDetail(articleId).then((res) => {
        if (res.code !== 0) {
          uni.showToast({ title: '获取文章详情失败' });
          return;
        }
        this.currentArticle = res.data;
        // 显示文章
        this.articleDetailIsShow = true;
        // 隐藏列表
        this.popArticleListIsShow = false;
      });
    },
    // 保险文章列表
    showInsureArticleList(item) {
      // this.popArticleTitle = '保险协议';
      // this.popArticleList = item.pkgArticleList;
      // this.popArticleListIsShow = true;
      this.showServiceList('保险协议', item.pkgArticleList);
    },
    closeArticleDetail() {
      this.articleDetailIsShow = false;
      // 隐藏列表
      this.popArticleListIsShow = true;
    },
    goServiceOrderDetailPage(item) {
      // 跳转至服务单详情页面
      this.$wxPromise.navigateTo({
        url: '/pages/service/introduce?insurancePackageId=' + item.packageId
      });
    },
    // 支付
    payService(item) {
      // 友盟
      tongji('69b73193-68d2-462e-9672-4fc4284877ab');
      if (item.payStatus === 0) {
        uni.showToast({ title: '功能建设中' });
        return;
      }
    },
    checkInsure() {
      uni.showToast('跳保险订单');
    },
    applyInsureMoney(item) {
      // 友盟
      tongji('f9809a46-f71d-434a-839c-8bb100401443');
      // 领取保障金
      this.$wxPromise.navigateTo({
        url: `/pages/getWelfareGold/index?patientId=${item.insured.insuredId}`
      });
    },

    chagneRegularMedicationInfo() {
      // 友盟
      tongji('25298928-b5cb-4cc2-922f-097f0c1a5d02');
      // 修改三定申请
      this.$wxPromise.navigateTo({
        url: '/pages/confirmAppointment/index?insuredPatientId=' + this.patientId
      });
      uni.setStorageSync('insuredPatientId', this.patientId);
    },
    checkRegularMedicationInfo() {
      // 跳转到查看药品记录页面
      this.$wxPromise.navigateTo({
        url: '/pages/drugOrder/index?patientId=' + this.patientId
      });
    },
    changeReplay() {
      uni.showToast({
        title: '修改申请'
      });
    },
    checkFlProductArticle(order) {
      // 查看健管健教类产品文档
      // 获取产品文档
      getInserviceInfoByOrderId(order.orderId).then((res) => {
        if (res.code !== 0) {
          uni.showModal({
            title: '提示',
            content: '获取产品文档失败'
          });
        } else {
          this.popArticleList = [];
          // 一个服务包下有多个产品服务，产品没说取那个，咱也不敢问，问了就被怼，暂时取第一个，提bug了再修复
          let packageProduct = res.data.packageProduct;
          packageProduct.forEach((pro) => {
            // 健管健教类
            if (pro.productType === 3) {
              pro.productSpecs.forEach((spe) => {
                if (spe.type === 5) {
                  this.popArticleList.push(spe);
                }
              });
            }
          });
          if (this.popArticleList.length > 0) {
            // this.popArticleListIsShow = true;
            // this.popArticleTitle = '服务介绍';
            this.showServiceList('服务介绍', this.popArticleList);
          } else {
            uni.showModal({
              title: '提示',
              content: '暂时没有产品文档'
            });
          }
        }
      });
    },

    // 支付按钮
    async payment(order) {
      this.$wxPromise.navigateTo({
        url: '/pagesC/pay/index?orderId=' + order.orderId
      });
    },
    // 激活按钮
    beActive(order) {
      this.inquiryMixin({
        insuranceServices: order.inserviceInfo.packageProduct,
        teamOrderNo: order.teamOrderNo,
        insuredId: this.patientId,
        packageId: order.insurancePackageId,
        orderId: order.orderId
      });
    },
    healthReport() {
      this.$wxPromise.navigateTo({
        url: '/pagesB/assessSick/assessHistoryListPage?patientId=' + this.patientId
      });
    },

    // 跳转体检服务
    physicalExamination() {
      this.$wxPromise.navigateTo({
        url: '/pagesC/physicalExamination/list?patientId=' + this.patientId
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  margin-top: -5rpx;
  margin-left: -5rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: hidden;
  .family {
    position: relative;
    padding-top: 10rpx; // 为了是让  family-content的圆角显示完整，要不然会有被切掉的感觉
    .family-bg-red {
      overflow-x: scroll;
      background: linear-gradient(184deg, #fb6f6f 0%, #f63434 100%);
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 180rpx;
    }
    .family-content {
      width: 700rpx;
      background: #fff;
      border-radius: 24rpx;
      padding: 32rpx 24rpx;
      margin: auto;
      z-index: 100;
      position: relative;
      box-sizing: border-box;
    }
    .f-inner {
      display: flex;
      align-items: center;
      width: max-content;
      padding-right: 80rpx;
      width: 100%;
      .f-item {
        width: 96rpx;
        height: 130rpx;
        margin-right: 44rpx;
        position: relative;
        .f-logo {
          width: 96rpx;
          height: 96rpx;
          background: white;
          border-radius: 96rpx;
          padding: 8rpx;
          box-sizing: border-box;
          overflow: visible;
          position: relative;
          // &.f-logo0 {
          //   background: none;
          //   border-radius: 16rpx;
          //   padding: 0;
          // }
          &.f-b-imgw-boy {
            background: #e9f8ff;
          }
          &.f-b-imgw-girl {
            background: #ffefef;
          }
          .f-logo-img {
            width: 100%;
            height: 100%;
            border-radius: inherit;
          }
          .f-logo-img-icon {
            position: absolute;
            width: 80rpx;
            height: 32rpx;
            left: 50%;
            transform: translateX(-50%);
            bottom: -16rpx;
          }
        }
        .f-name {
          width: 100%;
          text-align: center;
          margin-top: 20rpx;
          font-size: 28rpx;
          color: rgba(255, 255, 255, 0.6);
          &.active {
            color: white;
          }
        }
        .f-san {
          position: absolute;
          width: 0rpx;
          height: 0rpx;
          left: 50%;
          transform: translateX(-50%);
          border-bottom: 20rpx solid #e8e8e8;
          border-left: 20rpx solid transparent;
          border-right: 20rpx solid transparent;
          bottom: -2rpx;
        }
      }
      .f-add {
        width: 96rpx;
        height: 130rpx;
        margin-right: 40rpx;
        .f-a-btn {
          background: rgba(255, 255, 255, 0.2);
          color: white;
          text-align: center;
          width: 96rpx;
          height: 96rpx;
          line-height: 96rpx;
          color: white;
          font-size: 72rpx;
          position: relative;
          border-radius: 96rpx;
          image {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 64rpx;
            height: 64rpx;
            transform: translate(-50%, -50%);
          }
        }
        .f-name {
          text-align: center;
          width: 100%;
          margin-top: 20rpx;
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }
    .p-user {
      width: 100%;
      height: 90rpx;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 22rpx 24rpx;
      box-sizing: border-box;
      margin: auto;
      display: flex;
      align-items: center;
      border-top: 1px solid #e8e8e8;
      .p-u-logo {
        width: 40rpx;
        height: 40rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .p-u-name {
        margin-left: 12rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.55);
      }
      .p-u-line {
        margin: 0px 24rpx;
        border-left: 1rpx solid #e8e8e8;
        width: 0;
        height: 32rpx;
        line-height: 32rpx;
      }

      .p-u-goods {
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.55);
      }
    }
  }
  // 服务包样式
  .order-wrap {
    .order {
      width: 700rpx;
      border-radius: 24rpx;
      background: white;
      box-sizing: border-box;
      margin: auto;
    }

    .pkg-tip-wrap {
      width: 100%;
      border-radius: 24rpx;
      padding: 74rpx 0rpx;
      box-sizing: border-box;
      .pkg-tip {
        width: 700rpx;
        font-size: 36rpx;
        color: #999;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        border-radius: 24rpx;
      }
    }
    .order-list-wrap {
      .order {
        width: 700rpx;
        margin: auto;
        margin-top: 24rpx;
        border-radius: 24rpx;
        background: #ffffff;
      }
    }
  }

  .pkg {
    width: 700rpx;
    margin: auto;
    position: relative;
    padding: 48rpx 0rpx;
  }
  .p-info {
    width: 700rpx;
    padding: 36rpx 24rpx;
    box-sizing: border-box;
    margin: auto;
    .p-i-name-w {
      width: 100%;
      .p-i-name {
        font-size: 36rpx;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.9);
      }
    }
    .p-i-operate {
      width: 100%;
      height: 56rpx;
      // display: flex;
      align-items: center;
      // justify-content: space-between;
      text-align: right;
      font-size: 26rpx;
      position: relative;

      .p-i-status {
        border-radius: 8rpx;
        font-size: 24rpx;
        font-weight: 400;
        padding: 4rpx 10rpx;
        color: white;
        height: 32rpx;
        line-height: 32rpx;
        word-break: keep-all;
        position: absolute;
        top: 24rpx;
        left: 0;
      }

      .p-detail {
        font-size: 26rpx;
        font-weight: 400;
        color: #2680eb;
        margin-top: 10rpx;
        display: inline-block;
      }
      .p-i-btn {
        display: inline-block;
        width: 144rpx;
        height: 48rpx;
        border: 1px solid #f34e1c;
        border-radius: 32rpx;
        line-height: 48rpx;
        font-size: 24rpx;
        color: #f34e1c;
        text-align: center;
      }
    }

    .p-i-art {
      margin-top: 20rpx;
      .p-i-a-item {
        display: inline-block;
        font-size: 24rpx;
        color: #2680eb;
        opacity: 1;
        margin-right: 36rpx;
      }
    }
  }
  .p-prod {
    width: 700rpx;
    margin: auto;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    opacity: 1;
    border-radius: 0px 0px 16rpx 16rpx;
    box-sizing: border-box;
    margin-top: -2px;
  }
  .order-checkpro-btn {
    margin-top: 48rpx;
    font-size: 24rpx;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
  }
  .order-line {
    display: none;
    position: relative;
    height: 0rpx;
    border-top: 1rpx solid #e8e8e8;
    margin: auto;
    z-index: 1;
    height: 48rpx;
    margin-top: 48rpx;
    .o-l-left {
      width: 48rpx;
      height: 48rpx;
      border-radius: 48rpx;
      background: $uni-bg-color;
      position: absolute;
      left: -20rpx;
      top: 24rpx;
      top: -24rpx;
    }
    .o-line {
    }
    .o-l-right {
      width: 48rpx;
      height: 48rpx;
      border-radius: 48rpx;
      right: -20rpx;
      top: 24rpx;
      background: $uni-bg-color;
      position: absolute;
      top: -24rpx;
    }
  }
  .order-arrow {
    width: 48rpx;
    height: 48rpx;
    margin: auto;
    margin-bottom: 48rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .g-title {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.55);
    opacity: 1;
    margin: auto;
    width: 700rpx;
    padding: 48rpx 24rpx 0rpx;
    box-sizing: border-box;
    margin-bottom: 24rpx;
  }
  .goods {
    position: relative;
    border-radius: 16rpx;
    box-sizing: border-box;
    position: relative;
    margin: auto;
    height: 100rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0px 24rpx;
    .g-info {
      .g-i-name {
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.9);
        width: 460rpx;
        .g-i-name-statusName {
          background: #f25559;
          margin-left: 5rpx;
          border-radius: 8rpx;
          font-size: 24rpx;
          font-weight: 400;
          padding: 4rpx 10rpx;
          color: white;
          height: 32rpx;
          line-height: 32rpx;
          word-break: keep-all;
        }
      }
      .g-i-com {
        width: 248rpx;
        margin-top: 24rpx;
        height: 40rpx;
        border: 1px solid #f34e1c;
        border-radius: 8rpx;
        text-align: center;
        line-height: 40rpx;
        font-size: 24rpx;
        color: #f34e1c;
      }
      .g-i-peroid {
        display: flex;
        margin-top: 32rpx;
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.3);
        .g-i-p-start {
        }
        .g-i-p-start {
        }
      }
      .g-i-art {
        display: flex;
        margin-top: 40rpx;
        .g-i-a-item {
          font-size: 24rpx;
          color: #2680eb;
          opacity: 1;
          margin-right: 36rpx;
        }
      }
    }
    .g-apply {
      position: absolute;
      // top: 50%;
      // transform: translateY(-50%);
      right: 24rpx;
      width: 144rpx;
      height: 48rpx;
      border: 1px solid #f34e1c;
      border-radius: 32rpx;
      text-align: center;
      font-size: 24rpx;
      line-height: 48rpx;
      color: #f34e1c;
    }
  }
  .medicine {
    margin: auto;
    box-sizing: border-box;
    border-radius: 16rpx;
    position: relative;
    height: 100rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0px 24rpx;
    .m-left {
      // width: 400rpx;
      .m-title {
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.9);
        width: 460rpx;
      }
      .m-hz {
        margin-top: 16rpx;
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.3);
        display: flex;
      }
      .m-i-art {
        margin-top: 40rpx;
        .m-i-a-item {
          font-size: 24rpx;
          color: #2680eb;
          opacity: 1;
          margin-right: 36rpx;
          display: inline-block;
        }
      }
    }
    .m-right {
      position: absolute;
      width: 160rpx;
      height: 56rpx;
      right: 24rpx;
      // top: 50%;
      // transform: translateY(-50%);
      bottom: 24rpx;
      border: 1px solid #f34e1c;
      border-radius: 28rpx;
      line-height: 56rpx;
      font-size: 24rpx;
      color: #f34e1c;
      text-align: center;
    }
    .fl-btn {
      position: absolute;
      // top: 50%;
      // transform: translateY(-50%);
      bottom: 0rpx;
      right: 24rpx;
      align-self: flex-end;
      width: 160rpx;
      height: 56rpx;
      border: 1px solid #f34e1c;
      border-radius: 28rpx;
      line-height: 56rpx;
      font-size: 24rpx;
      color: #f34e1c;
      text-align: center;
    }
  }

  .fl-list {
    box-sizing: border-box;
    margin: auto;
    border-radius: 16rpx;
    height: 100rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0px 24rpx;
    .fl-item {
      width: 100%;
      height: 56rpx;
      align-items: center;
      position: relative;
      .fl-logo {
        width: 80rpx;
        height: 80rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .fl-con {
      }
      .fl-des {
        text-align: left;

        .fl-name {
          font-size: 32rpx;
          color: rgba(0, 0, 0, 0.9);
          width: 460rpx;
        }
        .fl-info {
          font-size: 24rpx;
          color: rgba(12, 6, 6, 0.3);
          margin-top: 16rpx;
        }
      }
      .fl-i-art {
        display: flex;
        margin-top: 16rpx;
        .fl-i-a-item {
          display: inline-block;
          font-size: 24rpx;
          color: #2680eb;
          opacity: 1;
          margin-right: 36rpx;
        }
      }
      .fl-btn {
        position: absolute;
        // top: 50%;
        // transform: translateY(-50%);
        bottom: 0rpx;
        right: 0rpx;
        align-self: flex-end;
        width: 160rpx;
        height: 56rpx;
        border: 1px solid #f34e1c;
        border-radius: 28rpx;
        line-height: 56rpx;
        font-size: 24rpx;
        color: #f34e1c;
        text-align: center;
      }
    }
  }
  .his {
    margin-top: 44rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.55);
    padding-bottom: 44rpx;
  }
  .serviceArticleList {
    // 显示服务详情列表
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.55);
    .s-inner {
      position: absolute;
      top: 5%;
      left: 50%;
      transform: translate(-50%, 0);
      z-index: 10;
      width: 700rpx;
      height: 90%;
      padding: 0rpx 40rpx 32rpx;
      box-sizing: border-box;
      background: white;
      border-radius: 24rpx;
      .s-header {
        width: 100%;
        height: 120rpx;
        line-height: 120rpx;
        position: relative;
        .s-title {
          font-size: 36rpx;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.9);
          text-align: center;
        }
        .s-icon {
          width: 40rpx;
          height: 40rpx;
          position: absolute;
          right: 0;
          top: 40rpx;
        }
      }
      .s-cont {
        .s-c-item {
          height: 60rpx;
          line-height: 60rpx;
          color: #2680eb;
        }
      }
    }
  }
}
.orderTitle {
  color: rgba(0, 0, 0, 0.6);
  font-size: 32rpx;
  position: relative;
  padding-left: 20rpx;
  width: 700rpx;
  margin: auto;
  margin-bottom: 20rpx;
}
.orderTitle::before {
  position: absolute;
  left: 0;
  top: 8rpx;
  content: '';
  width: 6rpx;
  height: 32rpx;
  border-left: 6rpx solid rgba(243, 78, 28, 1);
}
.service-banner {
  width: 654rpx;
  height: 152rpx;
  margin: auto;
  margin-top: 26rpx;
  img {
    width: 100%;
    height: 100%;
  }
}
.service-ad {
  width: 700rpx;
  margin: auto;
  border-radius: 12px;
  background-color: #fff;
  padding: 40rpx 24rpx;
  margin-top: 24rpx;
  box-sizing: border-box;
  .s-ad-title {
    font-size: 32rpx;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.9);
  }
  .s-ad-img {
    margin: auto;
    margin-top: 24rpx;
    width: 654rpx;
    height: 296rpx;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
.healthPannel {
  .radiosList {
    display: inline-block;
    width: 120rpx;
    height: auto;
    margin: 20rpx;
    .icon {
      width: 120rpx;
      height: 120rpx;
      position: relative;
      background-color: rgba(233, 248, 255, 1);
      border-radius: 100%;
      &.icon-red {
        background-color: #ffefef;
      }
      img {
        width: 88rpx;
        height: 88rpx;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .mark {
      width: 24rpx;
      height: 24rpx;
      background: red;
      border-radius: 50%;
      position: absolute;
      top: 0px;
      right: 8rpx;
    }
    .name {
      color: rgba(0, 0, 0, 0.9);
      font-size: 28rpx;
      text-align: center;
      padding: 16rpx 0;
    }
  }

  .bgOrigin {
    .icon {
      background-color: #ffefef;
    }
  }
}
.spread-opr {
  font-size: 24rpx;
  color: rgba(0, 0, 0, 0.55);
  width: 100%;
  margin-top: 20rpx;
  text-align: center;
  height: 40rpx;

  .opr {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .opr-down {
    .opr-img-wrap {
      margin-top: -10rpx;
    }
  }
  .opr-txt {
    display: inline-block;
  }
  .opr-img-wrap {
    width: 24rpx;
    height: 24rpx;
    display: inline-block;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .opr-up {
    image {
      transform: rotate(180deg);
    }
  }
}
.marginR12 {
  margin-right: 20rpx;
}
.marginL20 {
  margin-left: 20rpx;
}
</style>
